<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;
	}
	#left{
		width: 400px;
		height: 400px;
		border: 2px solid blue;
		margin: 10px;
		background: url(400.jpg) no-repeat;
		position: relative;
		float: left;
	}
	#left #sekuai{
		width: 200px;
		height: 200px;
		background: #E6EAF3;
		opacity: 0.6;
		filter: alpha(opacity=60);
		position: absolute;
		top: 0px;
		left: 0px;
		display: none;
	}
	#right{
		width: 400px;
		height: 400px;
		border: 1px solid black;
		float: left;
		margin: 50px;
		overflow: hidden;
		position: relative;
		display: none;
	}
	#rpic{
		position: absolute;
		top: 0px;
		left: 0px;
	}
	#gaizi{
		width: 400px;
		height: 400px;
		position: absolute;
		top: 0;
		left: 0;
		background: green;
		opacity: 0;
		filter: alpha(opacity=0);
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var left = document.getElementById('left');
		var sekuai = document.getElementById('sekuai');
		var right = document.getElementById('right');
		var rpic = document.getElementById('rpic');
		var gaizi = document.getElementById('gaizi');

		// 给左侧加鼠标移动事件
		gaizi.onmousemove = function(e){
			// 获得事件对象
			var ev = window.event || e;
			// 获得鼠标距离事件源的位置
			var m_left = ev.offsetX || ev.layerX;
			var m_top = ev.offsetY || ev.layerY;

			document.title = m_left+'|'+m_top;

			// 计算色块的位置
			var div_left = m_left-100;
			var div_top = m_top - 100;

			// 判断色块的位置，不要超出范围
			if(div_left<0){
				div_left=0;
			}
			if(div_left>200){
				div_left=200;
			}
			if(div_top<0){
				div_top=0;
			}
			if(div_top>200){
				div_top=200;
			}

			// 将位置赋值给色块
			sekuai.style.left = div_left+'px';
			sekuai.style.top = div_top + 'px';

			// 计算右侧大图的位置
			var r_left = div_left*-2;
			var r_top = div_top*-2;

			// 给右侧大图赋值
			rpic.style.left = r_left+'px';
			rpic.style.top = r_top+'px'

		}

		// 给盖子加鼠标移入事件，移入之后让色块和右侧区域显示
		gaizi.onmouseover = function(){
			right.style.display = 'block';
			sekuai.style.display = 'block';
		}

		// 给盖子加鼠标移出事件，移入之后让色块和右侧区域隐藏
		gaizi.onmouseout = function(){
			right.style.display = 'none';
			sekuai.style.display = 'none';
		}
	}
</script>
</head>

<body>
<div id="left">
	<div id="sekuai"></div>
	<div id="gaizi"></div>
</div>

<div id="right">
	<img src="800.jpg" alt="" id="rpic" />
</div>



</body>
</html>
